<template>
	<view class="purchase-body">
		<view class="mod-custom-bar">
			<view class="custom-black" @click="back">
				<text class="cuIcon-back"></text><text>返回</text>
			</view>
			<view class="custom-content">
				<text>合同信息</text>
			</view>
		</view>
		<!-- 		<view class="step-bar">
			
			<view class="step-box" :class="[currentStep=='step1'?'step-box-active':'']"  data-name='step1' @click="changeModule">
              合同文本
			</view>
			<view class="step-box " :class="[currentStep=='step2'?'step-box-active':'']" data-name='step2' @click="changeModule">
				采购信息
			</view>
			
		</view> -->
		<!-- <view class="contract-data"> -->
		<step1 :status='status' :id='id' v-if="currentStep=='step1'"></step1>
		<!-- </view> -->
		<view class="options-bar">
			<view class="options-content" style="justify-content:center">
				<view class="option-box box-default" type='default' @click="lookRemark" style="margin-right: 30rpx;">
					审批记录
				</view>
				<!-- <view class="option-box box-danger"  v-if="status!='Finished'&&status!='BHHTOperator'" type='danger' @click="lookApproveModal('0')">
					  驳回
					</view> -->
				<!-- 	<view class="option-box box-blue"   v-if="type=='accept'&&status!='1'" type='blue' @click="lookApproveModal()">
						验收
					</view> -->
			</view>
		</view>
		<remark-Modal ref='remarkModal'></remark-Modal>
		<approve-modal ref='approveModal'></approve-modal>
	</view>
</template>

<script>
	import Step1 from './contract/step1.vue'
	import Step2 from './contract/step2.vue'
	import remarkModal from '../basic/remarkModal.vue'
	import approveModal from './query/apprvoeModal.vue'
	export default {
		onLoad(options) {
			console.log(options)
			this.cgId = options.cgId;
			this.id = options.id;
			this.pId = options.processId;
			this.status = options.status;
			this.type = options.type;
		},
		data() {
			return {
				currentStep: 'step1',
				cgId: ',',
				status: '',
				id: '',
				type: '',
				pId: ''
			}
		},
		components: {
			Step1,
			Step2,
			approveModal,
			remarkModal

		},
		methods: {
			lookApproveModal() {
				var data = {
					id: this.id

				}
				this.$refs.approveModal.show(data)
			},
			lookRemark() {
				this.$refs.remarkModal.show('', this.pId);
			},
			changeModule(e) {
				this.currentStep = e.currentTarget.dataset.name
			},
			back() {
				// uni.$emit('update',{msg:'页面更新'})
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	@import '../../colorui/common.scss';

	.purchase-body {
		width: 100%;
		// height: 100%;
		background: #fff;
	}

	.mod-custom-bar {
		display: flex;
		flex-direction: row;
		justify-content: center;
		color: #fff;
		line-height: 76rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 76rpx;
		background: linear-gradient(135deg, rgba(141, 47, 247, 1.0) 0%, rgba(69, 152, 224, 1.0) 100%);

		.custom-black {
			// flex: 0 1 auto;
			color: #fff;
			position: absolute;
			height: 76rpx;
			left: 0;
			top: 0;
			width: 160rpx;
			z-index: 10;
			color: #fff;
		}

		.custom-content {
			flex: 1;
			color: #fff;
			text-align: center;
		}
	}

	.step-bar {
		display: flex;
		flex-direction: row;
		background: #fff;
		justify-content: center;
		height: 84rpx;
		position: fixed;
		top: 76rpx;
		left: 0;
		width: 100%;
		z-index: 10;
		opacity: 1;

		.step-box {
			flex: 1;
			text-align: center;
			line-height: 84rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.step-box-active {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(64, 122, 224, 1);
		}



	}
</style>